{% load static %}
<!doctype html>
<html>
<meta charset="utf-8">
<title>Deposits and Withdrawals</title>
<script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/vue/2.0.6/vue.min.js"></script>
<script src="{% static 'js/exfun.js' %}"></script>
<script src="{% static 'js/fields.pack.js' %}"></script>
<script src="{% static 'js/uis.pack.js' %}"></script>


<script type="text/javascript">
    Vue.config.devtools = true
    $(function () {

        new Vue({
            el:'#there',
            data:{
                file_name:[],
                file2:'',
                img_url:'',
                crop_img:'',
            },
            watch:{
                img_url:function(v){
                    alert(v)
                }
            },
            methods:{
                show_upload:function(){

                },
                pre_view:function () {
                    for(var i=0;i<this.file_name.length;i++){
                        fl.read(this.file_name[i],function (data) {
                            $('#haha')[0].src = data
                        })
                    }
                },
                fack_click:function () {
                    $('#jjyy').click()
                },
                upload:function () {
//                    for (var i=0;i<this.file_name.length;i++){
//                        fl.upload(this.file_name[i],'/face/upload/')
//                    }
                    fl.uploads(this.file_name,'/face/upload')
                    //this.$refs.f1.upload('http://localhost:8000/upload_image_demo/')

                },
                upload2:function(){
                    var dd='dgo'
                    fl.upload(this.file2[0],function(urls){
                        alert(urls)
                    },function(progress){
                        console.log(progress)
                    })
                },
                upload_crop:function(){
                    fl.upload(this.crop_img[0],function(urls){
                        alert(urls)
                    })
                }
            }
        })

    })


</script>
</head>
<body>
<h1 id='tt'>Top 3 Transactions</h1>
<div id='there'>
    <file-input id='jjyy' v-model='file_name' multiple></file-input>

    <file-input id='jjyy' v-model='file2' ></file-input>
    <div><img src="" alt="" id='haha'></div>
    <button name="test" type="button"  @click='pre_view()'>预览</button>
    <button name="test" type="button"  @click='fack_click()'>dji</button>
    <button name="test" type="button"  @click='upload()' :disabled='file_name.length>0?false:true'>upload</button>
    <button name="test" type="button"  @click='upload2()' >upload2</button>


    <img-uploador v-model="img_url" :config="{crop:true}"></img-uploador>

    <img-crop v-model="crop_img" :config="{aspectRatio: 1}"></img-crop>
    <button @click="upload_crop()">upload crop</button>
    <!--<modal>-->
        <!--<div style="width: 80vw;height: 80vh;">-->
            <!--<ul>-->
                <!--<li>jjj</li>-->
            <!--</ul>-->
        <!--</div>-->
    <!--</modal>-->
</div>


<!--<script type="text/javascript">-->
    <!--//(function addXhrProgressEvent($) {-->
    <!--//    var originalXhr = $.ajaxSettings.xhr;-->
    <!--//    $.ajaxSetup({-->
    <!--//        //progress: function() { console.log("standard progress callback"); },-->
    <!--//        //xhr: function() {-->
    <!--//        //    var req = originalXhr(), that = this;-->
    <!--//        //    if (req) {-->
    <!--//        //        if (typeof req.addEventListener == "function") {-->
    <!--//        //            req.addEventListener("progress", function(evt) {-->
    <!--//        //                that.progress(evt);-->
    <!--//        //            },false);-->
    <!--//        //        }-->
    <!--//        //    }-->
    <!--//        //    return req;-->
    <!--//        //}-->

    <!--//		 xhr: function() {-->
    <!--//            var req = originalXhr(), that = this;-->
    <!--//            if (req) {-->
    <!--//                if (typeof req.addEventListener == "function") {-->
    <!--//                    req.upload.onprogress=function (evt) {-->
    <!--//	                    if (evt.lengthComputable) {-->
    <!--//				            console.log("Loaded " + parseInt( (evt.loaded / evt.total * 100), 10) + "%");-->
    <!--//				        } else {-->
    <!--//				            console.log("Length not computable.");-->
    <!--//				        }-->
    <!--//                    }-->
    <!--//                }-->
    <!--//            }-->
    <!--//            return req;-->
    <!--//        }-->


    <!--//    });-->
    <!--//})(jQuery);-->


    <!--function upload(file,up_url){-->
        <!--var xhr = new XMLHttpRequest();-->

        <!--var fd = new FormData();-->

        <!--fd.append("file", file);-->

        <!--//监听事件-->
        <!--xhr.upload.addEventListener("progress", uploadProgress, false);-->

        <!--//发送文件和表单自定义参数-->
        <!--xhr.open("POST", up_url,false);-->

        <!--xhr.send(fd);-->
    <!--}-->

    <!--function uploadProgress(evt){-->
        <!--if (evt.lengthComputable) {-->
            <!--//evt.loaded：文件上传的大小   evt.total：文件总的大小-->
            <!--var percentComplete = Math.round((evt.loaded) * 100 / evt.total);-->
            <!--console.console.log(percentComplete);-->
            <!--//加载进度条，同时显示信息-->
            <!--//$("#percent").html(percentComplete + '%')-->
            <!--//$("#progressNumber").css("width",""+percentComplete+"px");-->
        <!--}-->
    <!--}-->

    <!--var fl={-->
        <!--read:function (file,callback) {-->
            <!--var reader = new FileReader();-->
            <!--reader.onloadend = function () {-->
                <!--// 图片的 base64 格式, 可以直接当成 img 的 src 属性值-->
                <!--var dataURL = reader.result;-->
                <!--//var img = new Image();-->
                <!--//img.src = dataURL;-->
                <!--// 插入到 DOM 中预览-->
                <!--//$('#haha')[0].src=dataURL-->
                <!--callback(dataURL)-->
            <!--};-->
            <!--reader.readAsDataURL(file); // 读出 base64-->
        <!--},-->
        <!--upload:function (file,url,success) {-->
            <!--if(!success){-->
                <!--var success=function (data) {}-->
            <!--}-->
            <!--var fd = new FormData();-->
            <!--fd.append('file',file);-->
            <!--$.ajax({-->
                <!--url:url,-->
                <!--type:'post',-->
                <!--data:fd,-->
                <!--contentType: false,-->
                <!--success:function (data) {-->
                    <!--success(data)-->
                <!--},-->
                <!--processData:false,-->
                <!--xhr: function() {-->
                    <!--var xhr = new window.XMLHttpRequest();-->
                    <!--xhr.upload.addEventListener("progress", function(evt) {-->
                        <!--if (evt.lengthComputable) {-->
                            <!--var percentComplete = evt.loaded / evt.total;-->
                            <!--console.log('进度', percentComplete);-->
                        <!--}-->
                    <!--}, false);-->

                    <!--return xhr;-->
                <!--}-->
            <!--})-->
        <!--}-->
    <!--}-->


    <!--Vue.component('file-input',{-->
        <!--template:"<input type='file' @change='on_change($event)'>",-->
        <!--props:['value'],-->
        <!--data:function () {-->
            <!--return {-->
                <!--files:[]-->
            <!--}-->
        <!--},-->
        <!--methods:{-->
            <!--on_change:function (event) {-->
                <!--this.files=event.target.files-->
                <!--this.$emit('input',this.files)-->
            <!--},-->
            <!--//_changed:function (changeEvent) {-->
            <!--//    this.=changeEvent.target.files;-->
            <!--//    if(!files)-->
            <!--//        return-->

            <!--//    this.files=files-->


            <!--//    //this.ready=true;-->
            <!--//},-->
            <!--read:function (callback) {-->
                <!--var reader = new FileReader();-->
                <!--reader.onloadend = function () {-->
                    <!--// 图片的 base64 格式, 可以直接当成 img 的 src 属性值-->
                    <!--var dataURL = reader.result;-->
                    <!--//var img = new Image();-->
                    <!--//img.src = dataURL;-->
                    <!--// 插入到 DOM 中预览-->
                    <!--//$('#haha')[0].src=dataURL-->
                    <!--callback(dataURL)-->
                <!--};-->

                <!--reader.readAsDataURL(this.file); // 读出 base64-->
            <!--},-->
            <!--upload:function (up_url) {-->
                <!--var self =this;-->
                <!--//upload(this.file,up_url)-->
                <!--this.fd = new FormData();-->
                <!--this.fd.append('file', this.file);-->
                <!--$.ajax({-->
                    <!--url:up_url,-->
                    <!--type:'post',-->
                    <!--data:this.fd,-->
                    <!--contentType: false,-->
                    <!--//cache: false,-->
                    <!--success:function (data) {-->
                        <!--self.$dispatch('response',data)-->

                    <!--},-->
                    <!--processData:false,-->

                    <!--//error:function (data) {-->
                    <!--//	alert(data.responseText)-->
                    <!--//},-->
                    <!--//progress: function(evt) {-->
                    <!--//    if (evt.lengthComputable) {-->
                    <!--//     //self.$dispatch('progress',parseInt( (evt.loaded / evt.total * 100), 10))-->
                    <!--//        console.log("Loaded " + parseInt( (evt.loaded / evt.total * 100), 10) + "%");-->
                    <!--//    }-->
                    <!--//    else {-->
                    <!--//        console.log("Length not computable.");-->
                    <!--//    }-->
                    <!--//}-->

                    <!--//  xhrFields: {-->
                    <!--//    onprogress: function (e) {-->
                    <!--//        if (e.lengthComputable) {-->
                    <!--//            console.log('Loaded '+ (e.loaded / e.total * 100) + '%');-->
                    <!--//        } else {-->
                    <!--//            console.log('Length not computable.');-->
                    <!--//        }-->
                    <!--//    },-->
                    <!--//}-->
                    <!--xhr: function() {-->
                        <!--var xhr = new window.XMLHttpRequest();-->
                        <!--xhr.upload.addEventListener("progress", function(evt) {-->
                            <!--if (evt.lengthComputable) {-->
                                <!--var percentComplete = evt.loaded / evt.total;-->
                                <!--console.log('进度', percentComplete);-->
                            <!--}-->
                        <!--}, false);-->

                        <!--return xhr;-->
                    <!--}-->


                <!--})-->
            <!--},-->

        <!--}-->
    <!--})-->
<!--</script>-->


</body>
</html>